<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="top">
      <CommonContainer title="基础信息">
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="模版名称" prop="templateName">
              <el-input v-model="form.templateName" placeholder="请输入模版名称" maxlength="30"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="模版类型" prop="templateClassification">
              <el-select v-model="form.templateClassification" placeholder="请选择模版类型" style="width: 100%">
                <el-option v-for="dict in dict.type.take_car_contract_template_type" :label="dict.label" :value="parseInt(dict.value)" :key="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="说明">
              <el-input type="textarea" placeholder="请输入说明" v-model="form.templateRemark" maxlength="500" :rows="5" show-word-limit></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="附件">
              <div class="flex">
                <image-common :up-type="2" info="上传附件" is-show-tip :file-type="fileType" :limit="20" :fileSize="50" v-model="form.templateAnnex"></image-common>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </CommonContainer>


      <CommonContainer title="交车单模版">
        <div style="margin-top: 10px">
          <div class="flex-row-center">
            <el-button type="primary" @click="handleUploadFile">上传附件</el-button>
          </div>
          <div v-if="form.contractAnnex" style="margin-top: 15px">
            <image-common v-model="form.contractAnnex" :up-type="1" :limit="1"></image-common>
          </div>
          <div style="margin: 15px 0">
            <tinymce-editor v-model="form.contractContent" :tag-list="tagList"></tinymce-editor>
          </div>
        </div>
      </CommonContainer>

      <div class="card-wrap flex justify-end card-padding">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" v-loading="saveLoading" @click="submitForm">保存</el-button>
      </div>
    </el-form>
    <el-dialog
        title="附件是否导入合同模板"
        :visible.sync="uploadFileDialogVisible"
        width="30%"
        center>
      <span>注：请上传大小不超过50MB 格式为doc、docx格式的文件</span>
      <span slot="footer" class="flex-row-center-ar">
<!--         <contract-template-upload :upload-type="2" @uploadSuccess="unImportToEditor"></contract-template-upload>-->
        <el-button style="width: 100px; height: 40px; position: relative;" @click="uploadFileDialogVisible=false">取消</el-button>
        <contract-template-upload :upload-type="1" @uploadSuccess="importToEditor" :file-type="contractFileType"></contract-template-upload>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import ContractTemplateEditor from "@/components/Editor/contractTemplateEditor.vue";
import ContractTemplateUpload from "@/components/FileUpload/contractTemplateUpload.vue";
import TinymceEditor from "@/components/TinymceEditor/index.vue";
import * as contractTemplateApi from "@/api/contractTemplate/takeCarContractTemplate";
import {contractTemplateParam} from "@/api/contractTemplate/contractTemplate"

export default {
  name: 'TakeCarTemplateAdd',
  dicts: ['take_car_contract_template_type'],
  components: {
    ContractTemplateEditor,
    ContractTemplateUpload,
    TinymceEditor
  },
  data() {
    return {
      uploadFileDialogVisible: false,
      saveLoading: false,
      fileType: ['png', 'jpg', 'jpeg', 'pdf', 'excel', 'doc', 'docx', 'msg'],
      contractFileType:["doc", "docx"],
      form: {
        templateName: null,
        templateClassification: null,
        templateRemark: null,
        templateAnnex: null,//模版附件
        contractParam: null,
        contractAnnex: null,//合同附件
        contractContent: null,
      },
      rules: {
        templateName: [
          {required: true, message: '请输入模版名称', trigger: 'blur'},
        ],
        templateClassification: [
          {required: true, message: '请选择模版类型', trigger: 'blur'},
        ],
      },

      tagList: []
    }
  },
  computed: {},
  methods: {
    unImportToEditor(data) {
      this.uploadFileDialogVisible = false
      this.form.contractAnnex = data?.ossId
    },
    importToEditor(data) {
      this.uploadFileDialogVisible = false
      this.form.contractContent = data?.richText
      this.form.contractAnnex = data?.ossId
    },
    //获取合同模版参数
    getContractTemplateParams() {
      contractTemplateParam({
        type: 21
      }).then(res => {
        this.tagList = res.data;
      })
    },
    //合同详情
    getContractTemplateDetail() {
      contractTemplateApi.contractTemplateDetails(this.$route.query.id).then(res => {
        this.form = res.data;
        console.log('回显数据---', this.form)
      })
    },

    //合同模版附件上传成功的回调事件
    uploadSuccess(res) {
      this.form.contractContent = res.data;
    },
    // 选择参数
    handleCustomTag() {
      this.$refs.customtag.show();
    },
    handleUploadFile() {
      this.uploadFileDialogVisible = true
    },
    //取消
    cancel() {
      this.$confirm('确认取消吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.back()
      })

    },
    // 保存
    submitForm(type) {
      this.saveLoading = true
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.$route.query.id) {//编辑
            contractTemplateApi.contractTemplateUpdate(this.form).then(res => {
              this.$message.success('编辑成功')
              this.back()
            }).finally((f) => {
              this.saveLoading = false
            })
          } else {//新增
            contractTemplateApi.contractTemplateAdd(this.form).then(res => {
              this.$message.success('新增成功')
              this.back()
            }).finally((f) => {
              this.saveLoading = false
            })
          }
        }
      })
    },
    //返回
    back() {
      this.$router.back()
      this.$store.dispatch('tagsView/delView', this.$route)
    }

  },
  mounted() {
    this.getContractTemplateParams()
    const query = this.$route.query;
    if (query) {
      if (query.id) {
        const route = Object.assign({}, this.$route, {title: `编辑交车单模版`})
        this.$store.dispatch('tagsView/updateVisitedView', route)
        this.$nextTick(() => {
          this.getContractTemplateDetail()
        })
      }
    }

  },

}
</script>

<style lang="scss" scoped>

::v-deep .el-form--label-top .el-form-item__label {
  padding: 0;
}

.el-form-item {
  margin-bottom: 15px;
  width: 70%;
}

::v-deep .el-form-item--small .el-form-item__content {
  line-height: 33px;
}

</style>
